export default {
    data() {
        return {
            SearchNew: false,
            strBeginRainDlg: '',
            strEndRainDlg: '',
            backImg: null,
            yubaoInfoSCJY_res: null,
            yubaoInfoSCJY_param: null
        }
    },
    created() {
        this.entitiesRealRain = new Map()
        this.screenSpaceEventHandlerRain = null
        var img = new Image()
        img.src = require('@/assets/map/rainBack.png')
        this.backImg = img
        this.$eventBus.$on('flyToRealRain', this.flyToRealRain)
        this.$eventBus.$on('EB_YB_SCJY', (isShow, res, param) => {
            this.SearchNew = false
            if (isShow) {
                if (res && param) {
                    this.yubaoInfoSCJY_res = res
                    this.yubaoInfoSCJY_param = param
                }
                if (this.$route.path === '/prediction/Measured') {
                    if (this.pageState.YB_SC_ZD) {
                        this.creatRealRain()
                    }
                } else {
                    this.creatRealRain()
                }
            } else {
                this.clearRain()
            }
        })
        this.$eventBus.$on('EB_YB_SCJY1', (isShow, res, param) => {
            this.SearchNew = true
            if (isShow) {
                if (res && param) {
                    this.yubaoInfoSCJY_res = res
                    this.yubaoInfoSCJY_param = param
                }
                if (this.$route.path === '/prediction/Measured') {
                    if (this.pageState.YB_SC_ZD) {
                        this.creatRealRain()
                    }
                } else {
                    this.creatRealRain()
                }
            } else {
                this.clearRain()
            }
        })
    },
    methods: {
        getRianImg2(txt, rain, color, fontColor) {
            txt = txt.replace(' ', '')
            return new Promise((resolve, reject) => {
                var canvas = document.createElement('canvas')
                var ctx = canvas.getContext('2d')
                ctx.font = `16px Arial`

                var x = 22
                var y = 0
                var r = 4
                var w1 = ctx.measureText(txt).width + x
                var w2 = w1 + ctx.measureText(rain).width + x + 2
                var h = 30
                var sw = 2

                canvas.width = w2 * 2 + x * 2
                canvas.height = h * 2

                ctx.scale(2, 2) // 清晰一些
                if (w2 < 2 * r) r = w2 / 2
                if (h < 2 * r) r = h / 2

                // 画点
                ctx.fillStyle = color
                ctx.beginPath()
                ctx.arc(7, y + h / 2, 6, 0, 2 * Math.PI)
                ctx.fill()
                ctx.save()
                // 外轮廓
                // 外轮廓
                ctx.fillStyle = '#FFF'
                ctx.beginPath()
                ctx.moveTo(x + r, y)
                ctx.arcTo(x + w2, y, x + w2, y + h, r)
                ctx.arcTo(x + w2, y + h, x, y + h, r)
                ctx.arcTo(x, y + h, x, y, r)
                ctx.lineTo(x, y + h / 2 + 4)
                ctx.lineTo(x - 6, y + h / 2)
                ctx.lineTo(x, y + h / 2 - 4)
                ctx.arcTo(x, y, x + w2, y, r)
                ctx.closePath()
                ctx.fill()
                ctx.save()

                // 颜色背景
                ctx.fillStyle = color
                ctx.beginPath()
                ctx.moveTo(x + w1, y + sw)
                ctx.arcTo(x + w2 - sw, y + sw, x + w2 - sw, y + h + sw, r - sw)
                ctx.arcTo(x + w2 - sw, y + h - sw, x - sw, y + h - sw, r - sw)
                ctx.lineTo(x + w1, y + h - sw)
                ctx.closePath()
                ctx.fill()
                ctx.save()

                // 名字
                ctx.strokeStyle = '#000'
                ctx.font = `16px Arial`
                ctx.textAlign = 'left'
                ctx.textBaseline = 'middle'
                ctx.fillStyle = '#000'
                ctx.fillText(txt, x + 6, y + h / 2 + 1)

                // 雨量
                ctx.strokeStyle = '#000'
                ctx.font = `16px Arial`
                ctx.textAlign = 'left'
                ctx.textBaseline = 'middle'
                ctx.fillStyle = fontColor
                ctx.fillText(rain, x + w1 + 5, y + h / 2 + 1)

                const image = new Image()
                image.src = canvas.toDataURL('image/png')
                resolve(image)
            })
        },
        getPointIMg(color) {
            return new Promise((resolve, reject) => {
                var canvas = document.createElement('canvas')
                var ctx = canvas.getContext('2d')

                var r = 6
                canvas.width = r * 4
                canvas.height = r * 4

                ctx.scale(2, 2) // 清晰一些
                // ctx.fillStyle = '#FFF'
                // ctx.fillRect(-r, -r, r * 4, r * 4)
                // ctx.save()
                // 画点
                ctx.fillStyle = color
                ctx.beginPath()
                ctx.arc(r, r, r, 0, 2 * Math.PI)
                ctx.fill()
                ctx.save()

                const image = new Image()
                image.src = canvas.toDataURL('image/png')
                resolve(image)
            })
        },
        creatRealRain(res) {
            var res = this.yubaoInfoSCJY_res
            this.strBeginRainDlg = this.yubaoInfoSCJY_param.dtBegin
            this.strEndRainDlg = this.yubaoInfoSCJY_param.dtEnd
            this.clearRain()
            res && res.data && res.data.forEach(item => {
                var color = '#ccc'
                switch (item.level) {
                    case '6':
                        color = '#fe0000'
                        break
                    case '5':
                        color = '#fe09ff'
                        break
                    case '4':
                        color = '#1607fe'
                        break
                    case '3':
                        color = '#5ab4fe'
                        break
                    case '2':
                        color = '#47c046'
                        break
                    case '1':
                        color = '#a3f78b'
                        break
                    case '0':
                        color = '#ccc'
                        break
                }
                item.stationLst.forEach(station => {
                    var rian = station.p.toString() + 'mm'
                    this.getPointIMg(color).then(image => {
                        var entityBill = {
                            eventName: 'Rain',
                            prop: station,
                            position: Cesium.Cartesian3.fromDegrees(
                                Number(station.lgtd),
                                Number(station.lttd)
                            ),
                            label: {
                                text: rian,
                                scale: 1,
                                font: '16px sans-serif',
                                fillColor: Cesium.Color.fromCssColorString('#000'),
                                outlineColor: Cesium.Color.fromCssColorString('#FFF'),
                                outlineWidth: 4,
                                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                                heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
                                pixelOffset: new Cesium.Cartesian2(0, -15),
                                eyeOffset: new Cesium.Cartesian3(0, 0, 70),
                                horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 垂直
                                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                                disableDepthTestDistance: 50000000,
                                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 200000)
                            },
                            billboard: {
                                scale: 1,
                                image: image,
                                width: image.width / 2,
                                height: image.height / 2,
                                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                                heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
                                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 200000),
                                disableDepthTestDistance: 200000
                            }
                        }
                        this.entitiesRealRain.set(station.stcd, this.$viewer.entities.add(entityBill))
                    })
                    /*
                    var entityBill = {
                        eventName: 'Rain',
                        prop: station,
                        position: Cesium.Cartesian3.fromDegrees(
                            Number(station.lgtd),
                            Number(station.lttd),
                            10
                        ),
                        label: {
                            text: rian,
                            scale: 1,
                            font: '16px sans-serif',
                            fillColor: Cesium.Color.fromCssColorString('#000'),
                            outlineColor: Cesium.Color.fromCssColorString('#FFF'),
                            outlineWidth: 4,
                            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                            heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
                            pixelOffset: new Cesium.Cartesian2(0, -15),
                            eyeOffset: new Cesium.Cartesian3(0, 0, 70),
                            horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 垂直
                            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                            disableDepthTestDistance: 50000000,
                            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 200000)
                        }
                        // point: {
                        //     pixelSize: 10,
                        //     color: Cesium.Color.fromCssColorString(color),
                        //     heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                        //     distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 20000000),
                        //     disableDepthTestDistance: 20000000
                        // }
                    }
                    this.entitiesRealRain.set(station.stcd, this.$viewer.entities.add(entityBill))*/
                })
            })
            this.initEvevtRealRain()

        },
        creatRealRain_back() {
            var res = this.yubaoInfoSCJY_res
            this.strBeginRainDlg = this.yubaoInfoSCJY_param.dtBegin
            this.strEndRainDlg = this.yubaoInfoSCJY_param.dtEnd
            this.clearRain()
            res && res.data && res.data.forEach(item => {
                var color = '#ccc'
                var fontColor = '#000'
                switch (item.level) {
                    case '6':
                        color = '#fe0000'
                        fontColor = '#FFF'
                        break
                    case '5':
                        color = '#fe09ff'
                        fontColor = '#FFF'
                        break
                    case '4':
                        color = '#1607fe'
                        fontColor = '#FFF'
                        break
                    case '3':
                        color = '#5ab4fe'
                        break
                    case '2':
                        color = '#47c046'
                        break
                    case '1':
                        color = '#a3f78b'
                        break
                    case '0':
                        color = '#ccc'
                        break
                }
                item.stationLst.forEach(station => {
                    var rian = station.p.toString() + 'mm'
                    this.getRianImg2(station.stnm, rian, color, fontColor).then(image => {
                        var entityBill = {
                            eventName: 'Rain',
                            prop: station,
                            position: Cesium.Cartesian3.fromDegrees(
                                Number(station.lgtd),
                                Number(station.lttd)
                            ),
                            billboard: {
                                scale: 0.75,
                                image: image,
                                width: image.width / 2,
                                height: image.height / 2,
                                horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                                verticalOrigin: Cesium.VerticalOrigin.CENTER,
                                heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
                                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, this.$config.mapConfig.pb_far)
                            }
                        }
                        this.entitiesRealRain.set(station.stcd, this.$viewer.entities.add(entityBill))
                    })
                })
            })
            this.initEvevtRealRain()
        },
        flyToRealRain(stcd) {
            var entity = this.entitiesRealRain.get(stcd)
            if (entity) {
                this.$viewer.flyTo(entity, {
                    duration: 0.5,
                    offset: {
                        heading: this.$viewer.camera.heading,
                        pitch: this.$viewer.camera.pitch,
                        range: 2000
                    }
                })
            }
        },

        initEvevtRealRain() {
            var eventFn = pickedObject => {
                if (
                    pickedObject &&
                    pickedObject.id &&
                    pickedObject.id.eventName &&
                    pickedObject.id.eventName === 'Rain'
                ) {
                    if (this.SearchNew == false) {
                        const dlgParams = this.$store.getters.dlgParams
                        dlgParams.name = 'RainInfo'
                        dlgParams.params = pickedObject.id.prop
                        dlgParams.params.strBegin = this.strBeginRainDlg
                        dlgParams.params.strEnd = this.strEndRainDlg
                        // dlgParams.params.Step = this.ruleForm.TimeRadio
                        dlgParams.params.Step = 60
                        this.$store.dispatch('dlgParams', dlgParams)
                    }
                }
            }
            this.$store.getters.eventCesiumOption.leftPickFns.set('Rain', eventFn)
        },
        clearRain() {
            if (this.entitiesRealRain.size > 0) {
                this.entitiesRealRain.forEach((val, key) => {
                    this.$viewer.entities.remove(val)
                })
                this.entitiesRealRain = new Map()
                this.$store.getters.eventCesiumOption.leftPickFns.delete('Rain')
            }
        }
    }
}
